<template>
  <div id="orderDetail">
    <header div class="head">        
        <div class="back" @click="$router.go(-1)">            
        <mu-icon value="chevron_left"  />
        </div>
        <div class="head_text" @click="">
            订单详情           
        </div>
        <div class="flex1"></div>
    </header>
    <section class="pay-suc-section fixed-bottom">
        <ul>
            <li class="suc-con-list">
                <div class="list-left">订单号:</div>
                <div class="list-right">{{orderD.orderId}}</div>
            </li>
            <li class="suc-con-list">
                <div class="list-left">名称:</div>
                <div class="list-right">
                    <p class="right-top name-CN">{{orderD.roomTitle}}</p>
                    <p class="right-bottom name-EN">{{orderD.roomTitleEn}}</p>
                </div>
            </li>
            <li class="suc-con-list">
                <div class="list-left">入住时间:</div>
                <div class="list-right">
                    <p class="right-top">{{orderD.checkinTime}} (入住)</p>
                    <p class="right-bottom">{{orderD.checkoutTime}} (离开)</p>
                </div>
            </li>
             <li class="suc-con-list">
                <div class="list-left">入住人:</div>
                <div class="list-right">{{orderD.tenants[0].name}}</div>
            </li> 
             <li class="suc-con-list">
                <div class="list-left">手机号:</div>
                <div class="list-right">{{orderD.tenants[0].mobileNo}}</div>
            </li>
            <li class="suc-con-list">
                <div class="list-left">证件号:</div>
                <div class="list-right">{{orderD.tenants[0].idNo}}</div>
            </li>
            <li class="suc-con-list">
                <div class="list-left">发票抬头:</div>
                <div class="list-right">{{orderD.invoiceContent}}</div>
            </li>
            <!-- <li class="suc-con-list">
                <div class="list-left">可选服务:</div>
                <div class="list-option-name">餐费 x{{orderD.orderConsumables[0].quantity}}</div>
                <div class="list-option-price">{{orderD.orderConsumables[0].price}} 元</div>
            </li> -->
            <li class="suc-con-list list-none-bottom">
                <div class="list-left">总计:</div>
                <div class="list-right">{{orderD.orderAmount}} 元</div>
            </li>
        </ul>  
    </section>
    <footer class="footer" v-show="footerInfo=='去支付'" @click="footerGo">
         {{footerInfo}}
    </footer>
  </div>
</template>

<script>
    //require('../../assets/css/personalcenter.scss'); //引入的scss
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex'
    export default {
        name: 'orderDetail', //组件的名字
        data() {
            return { //数据
                msg: 'orderDetail',
                footerInfo:'去支付'
            }
        },
        methods: { //方法
            ...mapActions(['getorderInfos']),
            footInfo(){
                let status = this.$route.query.status
                if(status == '1'){
                    this.footerInfo = '去支付';
                }else{
                   this.footerInfo = '写评价'
                }
            },
            footerGo(){
                if(this.footerInfo == '去支付'){
                    this.$router.push({
                        path:'/payment',
                        query:{
                            orderId:this.orderD.orderId
                        }
                    })
                }else{
                    this.$router.push({
                        //path:'/wo'
                    })
                }
            }
        },
        computed: { //计算 用来引入vuex里面state
            ...mapState(['orderD'])
        },
        mounted: function() { //组件加载完成
            let orderId = this.$route.query.orderId
            this.getorderInfos(orderId)
            this.footInfo()
        },
        watch: { //健康某个数据变化后触发某个事件

        },
        destroyed: function() { //离开这个组件
        },
        components: {

        }

    }
</script>
<style scoped lang="scss">
    .pay-suc-section {
        margin: 0 15px;
        .suc-con-list {
            display: flex;
            justify-content: center;
            /*定义项目在主轴的对齐方向*/
            align-items: center;
            /*定义项目在交叉轴的对齐方向*/
            padding: 12px 0;
            border-bottom: 1px solid #eee;
            .list-left {
                flex: 2;
                position: relative;
                text-align: left;
                font-size: 14px;
                font-family: "微软雅黑";
                color: #666;
            }
            .list-right {
                flex: 6;
                position: relative;
                text-align: right;
                color: #333;
            }
            .list-option-name {
                flex: 4;
                position: relative;
                text-align: right;
                color: #333;
            }
            .list-option-price {
                flex: 2;
                position: relative;
                text-align: right;
                color: #333;
            }
        }
        .list-none-bottom {
            border-bottom: none;
        }
    }
    
    .pay-suc-footer {}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->